<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="web">
        <div class="header">
            <div class="header-bander">
              <ul class="ul">
                <li>炉石传说卡牌数据库</li>
                <li> 23.2.0.137922</li>
                <li>开启构筑模式</li>
                <li>套牌列表</li>
                <li> 
                    diy卡牌列表</li>
                <li> 
                    卡背图案</li>
                <li> 
                    NGA炉石专区</li>
                <li> 
                    暴雪战网登录</li>
              </ul>
            </div>
            <div class="img">
               <img src="./imgs/10001.png" class="img1">
               <img class="img2" src="https://hs.fbigame.com/template/default/images/nga_white.png" alt="">
          </div>
        </div>

        <div class="nav">
            <ul class="nav-ul">
                <li class="li1">
                   <div class="btn1" >卡牌描述</div>
                   <div> <input class="input1" type="text"></div>
                    <div class="btn2" >🔍</div>
                </li>
                <li>
                    <select>
                        <option>模式</option>
                        <option>全部</option>
                        <option>狂野</option>
                        <option>经典</option>
                        <option>竞技场</option>
                        <option>酒馆战旗</option>
                    </select>
                </li>
                <li>
                    <select>
                        <option>扩展包</option>
                        <option>全部扩展包</option>
                        <option>标准扩展包</option>
                        <option>狂野扩展包</option>
                        <option>经典扩展包</option>
                        <option>其他扩展包</option>
                    </select>
                </li>
                <li>
                    <select>
                        <option>职业选择</option>
                        <option>全部扩展包</option>
                        <option>标准扩展包</option>
                        <option>狂野扩展包</option>
                        <option>经典扩展包</option>
                        <option>其他扩展包</option>
                    </select>
                </li>
                <li>
                    <select>
                        <option>稀有度</option>
                        <option>全部扩展包</option>
                        <option>标准扩展包</option>
                        <option>狂野扩展包</option>
                        <option>经典扩展包</option>
                        <option>其他扩展包</option>
                    </select>
                </li>
                <li>
                    <select>
                        <option>水晶</option>
                        <option>全部扩展包</option>
                        <option>标准扩展包</option>
                        <option>狂野扩展包</option>
                        <option>经典扩展包</option>
                        <option>其他扩展包</option>
                    </select>
                </li>
                <li>
                    <select>
                        <option>类别</option>
                        <option>全部扩展包</option>
                        <option>标准扩展包</option>
                        <option>狂野扩展包</option>
                        <option>经典扩展包</option>
                        <option>其他扩展包</option>
                    </select>
                </li>
                <li>
                    <select>
                        <option>可否收藏</option>
                        <option>全部扩展包</option>
                        <option>标准扩展包</option>
                        <option>狂野扩展包</option>
                        <option>经典扩展包</option>
                        <option>其他扩展包</option>
                    </select>
                </li>
            </ul>
        </div>


        <div class="body">
            <ul class="body_ul">
                <li class="body_li">
                    <img src="./imgs/10007.png">
                </li>
                <li class="body_li">
                    <img src="./imgs/10002.png">
                </li>
                <li class="body_li">
                    <img src="./imgs/10003.png">
                </li>
                <li class="body_li">
                    <img src="./imgs/10004.png">
                </li>

                <li class="body_li">
                    <img src="./imgs/10005.png">
                </li>

                <li class="body_li">
                    <img src="./imgs/10006.png">
                </li>
            </ul>

            <ul class="body_ul">
                <li class="body_li">
                    <img src="./imgs/10007.png">
                </li>
                <li class="body_li">
                    <img src="./imgs/10002.png">
                </li>
                <li class="body_li">
                    <img src="./imgs/10003.png">
                </li>
                <li class="body_li">
                    <img src="./imgs/10004.png">
                </li>

                <li class="body_li">
                    <img src="./imgs/10005.png">
                </li>

                <li class="body_li">
                    <img src="./imgs/10006.png">
                </li>
            </ul>
            <ul class="body_ul">
                <li class="body_li">
                    <img src="./imgs/10007.png">
                </li>
                <li class="body_li">
                    <img src="./imgs/10002.png">
                </li>
                <li class="body_li">
                    <img src="./imgs/10003.png">
                </li>
                <li class="body_li">
                    <img src="./imgs/10004.png">
                </li>

                <li class="body_li">
                    <img src="./imgs/10005.png">
                </li>

                <li class="body_li">
                    <img src="./imgs/10006.png">
                </li>
            </ul>

            <ul class="body_ul">
                <li class="body_li">
                    <img src="./imgs/10007.png">
                </li>
                <li class="body_li">
                    <img src="./imgs/10002.png">
                </li>
                <li class="body_li">
                    <img src="./imgs/10003.png">
                </li>
                <li class="body_li">
                    <img src="./imgs/10004.png">
                </li>

                <li class="body_li">
                    <img src="./imgs/10005.png">
                </li>

                <li class="body_li">
                    <img src="./imgs/10006.png">
                </li>
            </ul>

            <ul class="body_ul">
                <li class="body_li">
                    <img src="./imgs/10007.png">
                </li>
                <li class="body_li">
                    <img src="./imgs/10002.png">
                </li>
                <li class="body_li">
                    <img src="./imgs/10003.png">
                </li>
                <li class="body_li">
                    <img src="./imgs/10004.png">
                </li>

                <li class="body_li">
                    <img src="./imgs/10005.png">
                </li>

                <li class="body_li">
                    <img src="./imgs/10006.png">
                </li>
            </ul>
        </div>
    </div>
</body>
</html>